<template>
  <div style="padding: 10px 10px 10px">
    <ve-form-builder v-model="formData" :config="formConfig" />
  </div>
</template>
<script>
function getFormConfig(vm) {
  return {
    formProps: {
      labelWidth: 80,
    },
    rules: {},
    elements: [
      {
        col: {
          span: 24,
        },
        item: {
          label: "标签位置",
        },
        widget: {
          virtualTag: "ve-radio",
          field: "labelPosition",
          props: {
            defaultValue: "left",
            type: "button",
          },
        },
        dict: {
          list: [
            { value: "left", label: "左" },
            { value: "right", label: "右" },
            { value: "top", label: "上" },
          ],
        },
      },
      {
        col: {
          span: 24,
        },
        item: {
          label: "标签宽度",
        },
        widget: {
          virtualTag: "ve-slider",
          field: "labelWidth",
          props: {
            min: 50,
            max: 200,
            step: 10,
            defaultValue: 80,
          },
          valueType: Number,
        },
      },
      {
        col: {
          span: 24,
        },
        item: {
          label: "栅格间距",
        },
        widget: {
          virtualTag: "ve-slider",
          field: "gutter",
          props: {
            min: 0,
            max: 30,
            defaultValue: 20,
          },
          valueType: Number,
        },
      },
      {
        col: {
          span: 24,
        },
        item: {
          label: "表单尺寸",
        },
        widget: {
          virtualTag: "ve-radio",
          field: "size",
          props: {
            defaultValue: "small",
          },
        },
        dict: {
          list: [
            { value: "medium", label: "中等" },
            { value: "small", label: "较小" },
            { value: "mini", label: "迷你" },
          ],
        },
      },
    ],
  };
}
export default {
  name: "FormAttrs",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      formConfig: getFormConfig(this),
    };
  },
  computed: {
    formData: {
      get() {
        return this.config ? this.config.formProps : {};
      },
      set(o) {
        this.$emit("input", o);
      },
    },
  },
};
</script>
